<template>
    <div class="bigD-center-cont">
        <i class="bigD-cont-lt"></i>
        <i class="bigD-cont-rt"></i>
        <i class="bigD-cont-lb"></i>
        <i class="bigD-cont-rb"></i>
        <span class="bigD-cont-title">教学车辆增长</span>
        <div class="bigD-cont-clhdqd">
            <ul>
                <li class="bigD-cont-clhdqd-item">
                    2018<i class="bigD-cont-clhdqd-h"></i>{{carUp["2018"]}} 辆 <span class="num-persent"><i class="iconfont icon-shangxian"></i><span style="font-size:34px;"> {{((carUp["2018"]-carUp["2017"])/carUp["2017"]*100).toFixed(2)}}</span>%</span>
                </li>
                <li class="bigD-cont-clhdqd-item">
                    2017<i class="bigD-cont-clhdqd-m"></i>{{carUp["2017"]}} 辆 <span class="num-persent"><i class="iconfont icon-shangxian"></i><span style="font-size:34px;"> {{((carUp["2017"]-carUp["2016"])/carUp["2016"]*100).toFixed(2)}}</span>%</span>
                </li>
                <li class="bigD-cont-clhdqd-item">
                    2016<i class="bigD-cont-clhdqd-l"></i>{{carUp["2016"]}} 辆 
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  props: ["carUp"],
  mounted: function() {
    //车辆活动强度
    $(".bigD-cont-clhdqd-h").addClass("on");
    $(".bigD-cont-clhdqd-m").addClass("on");
    $(".bigD-cont-clhdqd-l").addClass("on");
  }
};
</script>

<style scoped>
.bigD-center-cont {
  height: 220px;
}
.bigD-cont-clhdqd {
  height: auto;
}
.bigD-cont-clhdqd-item {
  font-size: 18px;
  padding: 16px 0 12px 0;
}
.bigD-cont-clhdqd-item i {
  height: 14px;
}
.num-persent {
  color: #0abfbc;
}
</style>


